<template>
  <div class="help_mod" :class="themeClass">
    <v-nav :title="$t('HelpCenter.Help Center')" v-if="isDayTime === false" title_color="#fff" :class="themeClass"></v-nav>
    <v-nav :title="$t('HelpCenter.Help Center')" v-if="isDayTime === true"></v-nav>
    <div class="help_mod_box">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh" :pulling-text="$t('info.info3')" :loosing-text="$t('info.info4')" :loading-text="$t('info.info2')" :success-text="$t('info.info5')">
        <van-list v-model="loading" :finished="finished" :loading-text="$t('info.info2')" :finished-text="$t('info.info6')" @load="onLoad">
          <van-cell v-for="(item, index) in helpList" :key="index" @click="jumpRouter('/mine/answering', item.id)" :class="themeClass1">
            <template #title>
              <img src="@/assets/img/Question@2x.png" alt="" />
              <p class="custom-title" :class="bgColor">{{ item.title }}</p>
            </template>
          </van-cell>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelpCenter',
  data() {
    return {
      page: 1,
      loading: false,
      finished: false,
      refreshing: false,
      helpList: [],
      isDayTime: false
    }
  },
  computed: {
    themeClass() {
      return this.isDayTime ? '' : 'darknight'
    },
    bgColor() {
      return this.isDayTime ? 'black' : 'white'
    },
    themeClass1() {
      return this.isDayTime ? '' : 'dark_li_color'
    }
  },
  watch: {
    '$store.state.nightMode': {
      handler(newVal) {
        this.isDayTime = newVal
      },
      immediate: true
    }
  },
  methods: {
    jumpRouter(router, id) {
      this.$router.push({
        path: router,
        query: {
          id: id
        }
      })
    },
    async getHelpList() {
      await this.$https.get('/platform/getHelpList?page=' + this.page).then(res => {
        if (this.refreshing) {
          this.helpList = []
          this.refreshing = false
        }
        this.helpList = [...this.helpList, ...res.data.data]
        this.loading = false

        if (this.page >= res.data.last_page) {
          this.finished = true
        } else {
          this.page++
        }
      })
    },
    // 上拉加载处理函数
    onLoad() {
      this.getHelpList()
    },
    // 下拉刷新处理函数
    onRefresh() {
      this.refreshing = true
      this.finished = false
      this.page = 1
      this.loading = true
      this.onLoad()
    }
  }
}
</script>

<style lang="less" scoped>
@import url('./index.less');
</style>
